<template>
  <div style="background-color: #fff; padding: 20px ;">
    <div class="ljm-index-title">最新操作日志</div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item,index) in list" :key="index" :name="index">
        <template slot="title"><div class="ljm-text-overflow">{{ item.content }}</div></template>
        <div>{{ item.operator_name }} {{ item.created_at| timeStanp }}</div>
        <div>{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getJournal } from '@/api/user'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      activeName: 1,
      list: []
    }
  },
  created() {
    this.getJournal()
  },
  methods: {
    async getJournal() { // 请求数据
      const { list } = await getJournal(this.listQuery)
      this.list = list
    }
  }
}
</script>
<style lang="scss" scoped>
  .ljm-index-title{
    color: #333;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .ljm-text-overflow{overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
